<template>
    <el-container>
            <el-main>
                <el-tabs v-model="activeName" @tab-click="handleClick" class="tabsMinHeight">
                    <el-tab-pane label="所有订单" name="first">
                        <div v-for="order in orderInfo">
                            <userOrderCard v-if="order.orderlists.length > 0" :order="order"></userOrderCard>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="待付款" name="second">
                        <div v-for="order in orderInfo">
                            <div v-show="order.uoOrderstatus == '0'">
                                <userOrderCard v-if="order.orderlists.length > 0" :order="order"></userOrderCard>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="待收货" name="fourth">
                        <div v-for="order in orderInfo">
                            <div v-show="order.uoOrderstatus == '3'">
                                <userOrderCard v-if="order.orderlists.length > 0" :order="order"></userOrderCard>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="待评价" name="Fifth">
                        <div v-for="order in orderInfo">
                            <div v-show="order.uoOrderstatus == '6'">
                                <userOrderCard v-if="order.orderlists.length > 0" :order="order"></userOrderCard>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <foot></foot>
            </el-main>
        </el-container>

</template>

<script>
    import UserOrderCard from "../../components/UserOrderCard";
    export default {

        data(){
            return{
                activeName: 'first',
                user:null,
                orderInfo:[],
            }
        },
        beforeCreate() {
            console.log('起始个人订单');
        },
        created() {
            let item = window.sessionStorage.getItem('user');
            this.user = JSON.parse(item);
            // console.log(this.user);
            this.getUserOrder(this.user.uUserid);
            this.updateData();
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            getUserOrder(id){
                this.$axios.get("/userorderlist/queryByUserId/"+id,).then(result=>{
                    this.$store.commit('saveUserOwnerOrder',result.data);
                    this.orderInfo = result.data;
                    console.log(this.orderInfo);

                })
            },
            updateData(){
                var val = 1;
                window.setInterval(()=>{
                    console.log("用户"+val++);
                    setTimeout(this.reloadPage,0);
                },1000);
            },
            reloadPage(){
                window.location.reload;
            }
        },
        components:{
            "userOrderCard":UserOrderCard
        }
    }
</script>
<style scoped>
    /deep/.el-tabs__header{
        width: 71.5vw;
    }
    /deep/.el-tabs__nav>div{
        font-size: 16px;
        font-weight: 800;
    }
    .el-tabs{
        margin-left: 13.5vw;
    }
    img{
        height: 50px;
        width: 40px;
        display: inline-block;
    }
    td{
        width: 10vw;
    }
    .el-main{

        padding: 0;
        overflow-x: hidden;
    }
    .tabsMinHeight{
        /*outline: 1px solid red;*/
        min-height: 53vh;
    }
    /deep/.foot{
        padding: 0;
        height: 20vh;
        float: bottom;
    }
</style>